package icu.bughub.app.app.ui.components

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.dp
import icu.bughub.app.app.viewmodel.TaskViewModel

@Composable
fun CircleRing(boxWidthDp: Int, taskViewModel: TaskViewModel) {

    val strokeWidth = 30f // 圆环宽度
    val startAngle = 160f // 起始角度

    // TODO: 实现圆形进度条
    Canvas(
        modifier = Modifier.size(boxWidthDp.dp)
    ) {
        //2个方案
        //1. 使用 startAngle =-10f ,sweepAngle = 200f  并使用 rotate 翻转180度
        //2. 使用 startAngle = 160F,sweepAngle = 220f

        //翻转180度 绘制圆环
        /* rotate(degrees = 180f) { // 翻转180度
             drawArc(
                 color = Color(0, 0, 0, 33), // 圆环颜色
                 startAngle = -10F,  // 起始角度
                 sweepAngle = 200F, // 圆环角度
                 useCenter = false, // 不使用中心
                 style = Stroke(
                     width = 30f, // 圆环宽度
                     cap = StrokeCap.Round  // 圆形
                 )
             )
         }*/

        //背景
        drawArc(
            color = Color(0, 0, 0, 10), // 圆环颜色
            startAngle = startAngle,  // 起始角度
            sweepAngle = 220f, // 圆环角度
            useCenter = false, // 不使用中心
            style = Stroke(
                width = strokeWidth, // 圆环宽度
                cap = StrokeCap.Round  // 圆形
            )
        )

        //进度
        drawArc(
            color = Color.White, // 圆环颜色
            startAngle = startAngle,  // 起始角度
            sweepAngle = taskViewModel.pointOfYearPercent, // 圆环角度
            useCenter = false, // 不使用中心
            style = Stroke(
                width = strokeWidth, // 圆环宽度
                cap = StrokeCap.Round  // 圆形
            )
        )

    }
}



